<template>
	<z-paging ref="paging" bg-color="#F4F5FA">
		<template #top>
			<su-status-bar />
			<view class="top">

				<view class="top-box">
					<image class="nav-bg" src="@/static/images/nav_bg.png"></image>
					<!-- <view class="nav-title">
						<uni-icons type="left" color="#FFFFFF" size="25" @click="onClickNavBack"></uni-icons>

						<view style="margin: 0 auto;">
							我的邀请人
						</view>

					</view> -->
					<uni-nav-bar left-icon="left" backgroundColor="transparent" :border="false" color="#fff"
						@clickLeft="onClickNavBack">
						<view class="nav-title">我的邀请人</view>
					</uni-nav-bar>

					<view class="total-box">
						<view class="total-team" v-if="invitationInfo">

							<view class="left">
								<image class="avatar" :src="invitationInfo.avatar" mode="aspectFit"></image>
								<view class="name">{{invitationInfo.username}}</view>

							</view>
							<view class="right">
								<view class="">{{getIdentity(invitationInfo.userIdentity)}}</view>

							</view>

						</view>
						<view v-else class="noInvitationInfo">用户邀请人不存在</view>
					</view>

				</view>

			</view>
		</template>
	</z-paging>



</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		// computed
	} from 'vue';
	import teamApi from '@/sheep/api/member/team'

	import sheep from '@/sheep';

	const invitationInfo = ref({})
	//获得邀请我的用户
	const getInvitationInfo = async () => {
		const id = sheep.$store('user').userInfo.id
		let res = await teamApi.getInvitationMy({
			id: id
		})
		console.log('获得邀请我的用户', res)
		// setTimeout(() => {
		if (res.code == 0) {
			invitationInfo.value = res.data
		} else {
			invitationInfo.value = ''
		}

	}


	const onClickNavBack = () => {
		uni.navigateTo({
			url: '/pages/me/team'
		})
	}

	//格式化时间戳
	const formatTime = (timestamp) => {
		return timeFormat(timestamp, 'yyyy-mm-dd')
	}
	//获取我的团队身份

	const getIdentity = (userIdentity) => {
		switch (userIdentity) {
			case 0:
				return '普通会员'
				break;
			case 1:
				return '零售商'
				break;
			case 2:
				return '代理商'
				break;
			case 3:
				return '批发商'
				break;
			default:
				break;
		}

	}
	onMounted(() => {
		getInvitationInfo()
	})
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5FA;
	}


	.top {
		width: 100vw;
		height: calc(100vw * 280.0 / 375);


	}

	.nav-bg {
		width: 100vw;
		height: calc(100vw * 150.0 / 375);
		position: absolute;
		top: 0;
		z-index: -10;

	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.top-box {
		width: 100vw;
		height: calc(100vw * 150.0 / 375);
		position: relative;
	}

	.total-box {
		width: 90%;
		// margin: 0 20px;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 10px;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);

		.line {
			width: 1px;
			min-height: 40px;
			background: white;
		}

		.total-team {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin-bottom: 15px;

			.left {
				display: flex;
				align-items: center;

				.avatar {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					margin-right: 10px;
				}

				line-height: 2;

				.name {
					font-size: 15px;
					font-weight: 550;
				}

				.value {
					color: #4D7BFF;
					font-weight: bold;
					font-size: 22px;
				}
			}

			.right {
				font-size: 13px;
				color: #4D7BFF;
				display: flex;
				align-items: center;
				padding: 5px;
				box-sizing: border-box;
				// border: 1px solid;
				border-radius: 50px;
				background-color: #DBE5FF;
			}
		}

		.noInvitationInfo {
			font-size: 15px;
			font-weight: 550;
		}

		.total-identity {
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-radius: 5px;
			background-color: #EDF1FF;
			padding: 15px 0px;
			box-sizing: border-box;

			.identity-item {
				text-align: center;
				line-height: 1.8;

				.name {
					font-size: 15px;
					font-weight: 550;
				}

				.value {
					font-size: 16px;
					color: #4D7BFF;
					font-weight: bold;
				}
			}
		}
	}

	.my-team {
		width: 100%;
		padding: 10px;
		// display: flex;
		// justify-content: center;
		// margin: 10px 0;
		font-weight: bold;
		font-size: 15px;
		color: #4D7BFF;
	}

	.logs-box {
		// margin-top: 10px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		padding: 10px;
		box-sizing: border-box;

		.log {
			// width: 90%;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 8px;
			box-sizing: border-box;
			line-height: 1.8;
			border-radius: 5px;
			box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);

			.log-left {
				font-size: 13px;
				display: flex;
				align-items: center;

				.avatar {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					margin-right: 10px;
				}

				.operation {
					font-weight: 550;
				}

				.time {
					font-size: 12px;
					color: #838383;
				}
			}

			.log-right {
				font-size: 14px;
				font-weight: 600;

			}
		}

		.line {
			height: 1px;
			width: 100%;
			background: #F1F1F1;

		}
	}
</style>